<template>
  <view class="Box">
    <view class="payOrderNum">
      订单编号:{{ orderNum }}
    </view>

    <view v-if="type == 5" class="payBook">
      <view class="title">
        课程信息
      </view>
      <view v-for="(item,index) in tableData.orderProductInfos" :key="index">
        <view class="payItem">
          <image :src="item.courseSpecification.specificationCover" class="itemImg" mode=""></image>
          <view class="itemCenter">
            <view class="">
              {{ item.courses[0].courseName }}
            </view>
            <view class="courseSpecificationName">
              {{ item.courseSpecification.courseSpecificationName }}(有效期{{ item.courseSpecification.validity }}天)
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="type == 2" class="payBook">
      <view class="title">
        预订信息
      </view>
      <view class="payDictName">
        场地类型: {{ tableData.dictName }}
      </view>
      <view class="">
        订场明细:
      </view>
      <view v-for="(item,index) in tableData.items" :key="index">
        <view class="payItem">
          <view class="">
            {{ item.areaName }}
          </view>
          <view style="display: flex;margin-left: 40rpx;">
            <view style="color: #169bd5;">
              {{ item.day }}
            </view>
            <view class="">
              /{{ item.range }}
            </view>
          </view>

        </view>

      </view>

    </view>
    <view v-if="employeeVenueId != 0" class="buttonBox">
      <view class="itemBox cancelBox" @click="monthPreCount">
        取消核销
      </view>
      <view class="itemBox sumbitBox" @click="sumbitClick">
        确认核销
      </view>
    </view>
  </view>
</template>

<script>
import {
  gainVenueId,
  queryWriteOrderDetailsById,
  queryOrderCourseInfo,
  cancelAfterVerificationCourse,
  myOrderDetail
} from "@/api/challenge";

export default {
  data() {
    return {
      type: 0,
      tel: '',
      employeeVenueId: 0,
      orderNum: '',
      tableData: {},
      orderId: '',
      venueId: '',
      venueName: ''
    }
  },
  onLoad(data) {
    // console.log(data);
    this.orderId = data.scene
    this.tel = uni.getStorageSync('userinfo').phone


  },
  onShow() {
    this.tel = uni.getStorageSync('userinfo').phone
    if (this.tel == undefined) {
      uni.showToast({
        icon: 'none',
        title: '登录已过期'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/index'
        })
      }, 1000)
    }

    if (this.tel != undefined) {
      gainVenueId({
        phone: this.tel
      }).then(res => {
        console.log('获取对应id', res);
        this.employeeVenueId = res
      })

      queryWriteOrderDetailsById({
        orderId: this.orderId
      }).then(res => {
        console.log(res);
        this.type = res.type
        this.orderNum = res.orderNum
        this.venueId = res.venueId
        this.venueName = res.venueName
        if (res.type == 5) {
          queryOrderCourseInfo({
            orderNum: res.orderNum,
            type: 1
          }).then(params => {
            console.log('课程规格', params);
            this.tableData = params
          })
        }
        if (res.type == 2) {
          myOrderDetail({
            orderNum: res.orderNum,
          }).then(params => {
            console.log('订场', params);
            params.items.forEach(item => {
              item.day = item.day.slice(5)
            })
            this.tableData = params
          })
        }
      })
    }
  },
  methods: {
    monthPreCount() {
      uni.reLaunch({
        url: "/subpackageOne/WriteOff/writeOffStatus?type=3"
      })
    },
    sumbitClick() {
      if (this.venueId != this.employeeVenueId) {
        uni.$u.toast('该订单不属于' + this.venueName + ',请核查');
      } else {
        cancelAfterVerificationCourse(this.employeeVenueId, this.orderId).then(res => {
          console.log('核销', res);
          if (res == true) {
            uni.reLaunch({
              url: "/subpackageOne/WriteOff/writeOffStatus?type=1"
            })
          } else {
            uni.reLaunch({
              url: "/subpackageOne/WriteOff/writeOffStatus?type=2"
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Box {
  padding: 20rpx 20rpx;
}

.payOrderNum {

  font-size: 32rpx;
  font-weight: 600;
  margin: 50rpx 0 60rpx 0;
}

.payBook {


  .title {
    font-size: 34rpx;
    font-weight: 600;
  }


  .payItem {
    display: flex;

    padding: 10rpx 0;

    .itemImg {
      width: 120rpx;
      height: 120rpx;
    }

    .itemCenter {
      flex: 1;
      margin-left: 10rpx;

      .courseSpecificationName {
        margin-top: 16rpx;
        color: red;
      }

      .itemDay {
        color: #55cdff;
      }
    }

    .payDictName {
      margin: 16rpx 0;
    }

    .payItem {
      display: flex;
      justify-content: space-between;
      padding: 10rpx 0;

      .itemCenter {
        display: flex;

        .itemDay {
          color: #55cdff;
        }
      }
    }
  }
}

.buttonBox {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 2rpx solid #f2f2f2;

  .itemBox {
    width: 220rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    border-radius: 10rpx;
  }

  .cancelBox {
    background: #169bd5;
  }

  .sumbitBox {
    background: #f59a23;
  }
}
</style>
